<template>
<div :class="moduleName">
  <baidu-map class="bm-view" :ak="baiduMapAppKey" :center="center" :zoom="zoom" @ready="mapReady" @load="mapLoad" @moveend="syncCenterAndZoom" @zoomend="syncCenterAndZoom">
    <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-navigation>
    <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_LEFT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
    <bml-marker-clusterer :averageCenter="true">
      <bm-marker v-for="marker of markers" :key="marker.lng * marker.lat" :position="{lng: marker.lng, lat: marker.lat}"></bm-marker>
    </bml-marker-clusterer>
  </baidu-map>
  <box gap="20px">
    <h4>当前坐标：{{center.lng}}, {{center.lat}}</h4>
  </box>
  <group>
    <cell title="商家直播室" is-link @click.native="showLiveList = true">
      <badge text="10"></badge>
    </cell>
    <cell title="游戏任务" is-link @click.native="showGameList = true">
      <badge text="23"></badge>
    </cell>
    <cell title="小纸条" is-link @click.native="showMsgList = true">
      <badge text="100"></badge>
    </cell>
    <cell title="约喝咖啡" is-link @click.native="showCoffeeList = true">
      <badge text="7"></badge>
    </cell>
    <cell title="约个饭" is-link @click.native="showDinnerList = true">
      <badge text="15"></badge>
    </cell>
  </group>
  <div v-transfer-dom>
    <tabbar class="map-tab">
      <tabbar-item @on-item-click="showPinMenu = true">
        <span slot="label"> 使用【洪荒之引力】<icon  name="map-marker" color="#35495e" scale="1"></icon> Pin 此坐标</span>
      </tabbar-item>
    </tabbar>
    <actionsheet v-model="showPinMenu" :menus="pinMenus" @on-click-menu="onClickMenu">
    </actionsheet>
    <popup v-model="showForm">
      <component v-bind:is="formView" @end-submit="showForm = false"></component>
    </popup>
    <popup v-model="showLiveList">
      <live-list></live-list>
    </popup>
    <popup v-model="showGameList">
      <game-list></game-list>
    </popup>
    <popup v-model="showMsgList">
      <msg-list></msg-list>
    </popup>
    <popup v-model="showCoffeeList">
      <coffee-list></coffee-list>
    </popup>
    <popup v-model="showDinnerList">
      <dinner-list></dinner-list>
    </popup>
  </div>
</div>
</template>
<script>
const moduleName = 'fan-gravity-index'
import Config from '@/config'
import 'vue-awesome/icons/map-marker'
import {
  BaiduMap,
  BmMarker,
  BmNavigation,
  BmGeolocation,
  BmlMarkerClusterer
} from 'vue-baidu-map'
import {
  mapState,
  mapActions
} from 'vuex'
const defaultLocation = {
  lng: 121.371685,
  lat: 31.174335,
}
export default {
  components: {
    BaiduMap,
    BmMarker,
    BmNavigation,
    BmGeolocation,
    BmlMarkerClusterer,
    'the-popup-field': require('@c/the-popup-field'),
    'wechat-avatar-uploader': require('@c/wechat-avatar-uploader'),
    'pin-form-msg': require('./pin-form/msg'),
    'pin-form-coffee': require('./pin-form/coffee'),
    'pin-form-dinner': require('./pin-form/dinner'),
    'live-list': require('./parts/live-list'),
    'game-list': require('./parts/game-list'),
    'msg-list': require('./parts/msg-list'),
    'coffee-list': require('./parts/coffee-list'),
    'dinner-list': require('./parts/dinner-list'),
  },
  data() {
    let markers = this.generateMockMarkers(defaultLocation)
    return {
      moduleName,
      baiduMapAppKey: Config.baiduMapAppKey,
      center: {
        lng: 0,
        lat: 0
      },
      zoom: 3,
      markers,
      showPinMenu: false,
      pinMenus: {
        msg: '留个小纸条',
        coffee: '约喝咖啡',
        dinner: '约个饭',
      },
      showForm: false,
      formView: 'pin-form-msg',
      showLiveList: false,
      showGameList: false,
      showMsgList: false,
      showCoffeeList: false,
      showDinnerList: false,
    }
  },
  async asyncData({
    store,
    route
  }) {
    store.commit('page/update', {
      title: '饭有引力 - Pin',
      showBack: false,
      isShowTab: false,
      isShowDrawerBtn: true,
      showMore: true,
      // rightSlot: require('./_rightSlot'),
    })
  },
  computed: {
    ...mapState({
      user: state => state.user
    }),
    isBindWechat() {
      return this.user.unionid
    },
  },
  mounted() {

  },
  methods: {
    ...mapActions('user', [
      'update',
      'getUserInfo',
    ]),
    generateMockMarkers(location) {
      let markers = []
      for (let i = 0; i < 10; i++) {
        const position = {
          lng: location.lng + Math.random() / 100,
          lat: location.lat + Math.random() / 100
        }
        markers.push(position)
      }
      for (let i = 0; i < 10; i++) {
        const position = {
          lng: location.lng - Math.random() / 100,
          lat: location.lat - Math.random() / 100
        }
        markers.push(position)
      }
      for (let i = 0; i < 10; i++) {
        const position = {
          lng: location.lng + Math.random() / 100,
          lat: location.lat - Math.random() / 100
        }
        markers.push(position)
      }
      for (let i = 0; i < 10; i++) {
        const position = {
          lng: location.lng - Math.random() / 100,
          lat: location.lat + Math.random() / 100
        }
        markers.push(position)
      }
      return markers
    },
    mapReady({
      BMap,
      map
    }) {
      this.center.lng = defaultLocation.lng
      this.center.lat = defaultLocation.lat
      this.zoom = 15
    },
    mapLoad({
      BMap,
      map
    }) {
      console.log('load', BMap, map)
    },
    syncCenterAndZoom(e) {
      const {
        lng,
        lat
      } = e.target.getCenter()
      this.center.lng = lng
      this.center.lat = lat
      this.zoom = e.target.getZoom()
      this.markers = this.generateMockMarkers({
        lng,
        lat
      })
    },
    onClickMenu(key, item) {
      this.formView = `pin-form-${key}`
      this.showForm = true
    },
  }
}
</script>

<style lang="stylus">
.fan-gravity-index
  margin-bottom 65px
  .bm-view
    width 100%
    height 50vh
    margin auto 0
    position relative
    &::after
      width 22px
      height 40px
      display block
      content ' '
      position absolute
      top 25vh
      left 50%
      margin -40px 0 0 -11px
      /*background url('//maps.gstatic.com/mapfiles/api-3/images/spotlight-poi_hdpi.png')*/
      background url('/static/spotlight-poi.png')
      background-size 22px 40px /* Since I used the HiDPI marker version this compensates for the 2x size */
      pointer-events none /* This disables clicks on the marker. Not fully supported by all major browsers, though */
.map-tab
  .weui-tabbar__label
    background-color #00cfbd
    color #35495e!important
    font-weight bold
</style>
